<script>
  import $ from 'dfish-widget'
  import CheckboxGroup from './CheckboxGroup.vue'

  export default {
    mixins: [CheckboxGroup],
    data() {
      return {
        name: 'RadioGroup',
        remark: '单选框组合',
        attrs: [{
          name: 'model-value / v-model',
          type: 'String',
        }],
        examples: [{
            remark: '范例',
            type: 'html',
            view: true,
            code: `
              <template>
                <w-radiogroup :label="{text: '爱好:'}">
                  <w-radio v-for="item in radioList" name="interest" :value="item.value" :text="item.text" :model-value="radioValue"></w-radio>
                </w-radiogroup>
              </template>
              <${'script'}>
                export default {
                  data() {
                    return {
                      radioList: [
                        {text: '音乐', value: 1},
                        {text: '美术', value: 2},
                        {text: '体育', value: 3},
                      ],
                      radioValue: 1
                    }
                  }
                }
              </${'script'}>
            `,
						comp: {
							data() {
							  return {
							    radioList: [
							      {text: '音乐', value: 1},
							      {text: '美术', value: 2},
							      {text: '体育', value: 3},
							    ],
							    radioValue: 1
							  }
							}
						}
          },{
            remark: '选项后面跟随表单',
            type: 'html',
            view: true,
            code: `
              <w-radiogroup :label="{text: '爱好:'}" :vertical="true" gap="10">
                <w-radio name="subject" value="1" text="音乐" model-value="1">
                  <w-text name="music"></w-text>
                </w-radio>
                <w-radio name="subject" value="2" text="美术">
                  <w-text name="art"></w-text>
                </w-radio>
                <w-radio name="subject" value="3" text="体育">
                  <w-text name="sport"></w-text>
                </w-radio>
              </w-radiogroup>
            `
          },{
            remark: '选项后面跟随表单的横向排版',
            type: 'html',
            view: true,
            code: `
              <w-radiogroup :label="{text: '爱好:'}" :br="false">
                <w-radio name="interest" value="1" text="音乐" model-value="1">
                </w-radio>
                <w-radio name="interest" value="2" text="美术">
                </w-radio>
                <w-radio name="interest" value="3" text="自填">
                  <w-text name="custom"></w-text>
                </w-radio>
              </w-radiogroup>
            `
          }
				]
      }
    }
  }
</script>

<style>
</style>
